/*
 * @Author: wangtao
 * @Date: 2021-05-24 17:05:44
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-10 10:02:37
 * @Description: 角色切换
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Image,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import {
  px2dp,
  mainBgColorWhite,
  fontColorSecDeepGray,
} from '@/styles';
import { avatarDriver, avatarCarOwner, iconRightGray } from '@/images';

export default class RoleCard extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  render() {
    const { type, selectRole } = this.props;
    return (
      <TouchableOpacity
        style={styles.roleCard}
        activeOpacity={0.8}
        onPress={() => { selectRole(type); }}
      >
        <Image
          source={this._renderAvatar()}
          resizeMode='contain'
          style={styles.avatarImg}
        />
        <View
          style={styles.roleCardRight}
        >
          <View style={styles.roleCardContent}>
            <Text style={styles.roleCardTitle}>{this._renderTitle()}</Text>
            <Text style={styles.roleCardSubTitle}>
              {this._renderSubTitle()}
            </Text>
          </View>
          <Image
            source={iconRightGray}
            resizeMode='contain'
            style={styles.iconImg}
          />
        </View>
      </TouchableOpacity>
    );
  }

  _renderAvatar = () => {
    const { type } = this.props;
    if (type === 'driver') {
      return avatarDriver;
    }
    if (type === 'car_owner') {
      return avatarCarOwner;
    }
    if (type === 'goods_owner') {
      return avatarDriver;
    }
  };

  _renderTitle = () => {
    const { type } = this.props;
    if (type === 'driver') {
      return '我是司机';
    }
    if (type === 'car_owner') {
      return '我是车主';
    }
    if (type === 'goods_owner') {
      return '我是货主';
    }
  };

  _renderSubTitle = () => {
    const { type } = this.props;
    if (type === 'driver') {
      return '承接运单、便捷加油等服务';
    }
    if (type === 'car_owner') {
      return '车辆管理、收益查询等服务';
    }
    if (type === 'goods_owner') {
      return '承接运单等，司机能享受的服务';
    }
  };
}
const styles = StyleSheet.create({
  roleCard: {
    width: px2dp(670),
    height: px2dp(220),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(24),
    paddingLeft: px2dp(44),
    paddingRight: px2dp(34),
    marginTop: px2dp(40),
  },
  roleCardRight: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    flex: 1,
  },
  avatarImg: {
    width: px2dp(128),
    height: px2dp(128),
  },
  iconImg: {
    width: px2dp(36),
    height: px2dp(36),
  },
  roleCardContent: {
    marginLeft: px2dp(44),
    width: px2dp(315),
  },
  roleCardTitle: {
    fontSize: px2dp(36),
    fontWeight: 'bold',
  },
  roleCardSubTitle: {
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
  },
});
